<template>
  <view class="new-or-edit-modal">
    <up-popup v-model:show="show" overlay mode="bottom" touchable maxHeight="'80%'" closeable closeOnClickOverlay
      @close="close" @open="open">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">{{ title }}</view>
        </view>
        <up-form labelPosition="left" :model="formModel" :rules="rules" ref="formRef">
          <up-form-item labelWidth="100" label="车牌号码" prop="carPlate">
            <up-input v-model="formModel.carPlate" placeholder="请输入车牌号码" />
          </up-form-item>
          <up-form-item labelWidth="100" label="入场时间" prop="inTime">
            <up-input :modelValue="formModel.inTime" placeholder="请选择入场时间" @click="openDatePicker('inTime')" />
          </up-form-item>
          <up-form-item labelWidth="100" label="出场时间" prop="outTime">
            <up-input :modelValue="formModel.outTime" placeholder="请选择出场时间" @click="openDatePicker('outTime')" />
          </up-form-item>
        </up-form>

        <up-datetime-picker v-model="currentDateTime" :show="dateTimePickerShow" mode="datetime" title="选择时间"
          @confirm="handleConfirm" @cancel="handleCloseTimePicker" />
      </view>

      <view class="modal-footer">
        <up-button type="primary" @click="submit">确认</up-button>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { formatTime } from '@/utils/tools';
import { ref, reactive, computed } from 'vue';
const formRef = ref(null);
const emit = defineEmits(['submit']);
const props = defineProps({
  type: {
    type: String,
    default: 'add',
  },
  rowData: {
    type: Object,
    default: () => { },
  }
})
defineOptions({ name: "ParkingOrderModal" });

// 创建响应式数据  
const show = defineModel<boolean>("show", { default: false });
const dateTimePickerShow = ref(false);
const currentDateTime = ref(new Date());
const currentEditField = ref('');
const formModel = ref(createDefaultModel());
/**
 * 创建默认表单数据
 */
function createDefaultModel() {
  return {
    bizCode: '',
    carPlate: '',
    inTime: '',
    outTime: '',
  }
}

const rules = reactive({
  carPlate: [{ required: true, message: '请输入车牌号码', trigger: 'blur' }],
  inTime: [{ required: true, message: '请选择入场时间', trigger: 'blur' }],
})

const title = computed(() => {
  const titles: any = {
    add: "新增订单",
    edit: "编辑停车信息",
  };
  return titles[props.type];
});

function openDatePicker(field) {
  console.log(field, 'ceshi')
  currentEditField.value = field;
  // 设置当前日期时间选择器的值
  if (formModel.value[field]) {
    try {
      currentDateTime.value = new Date(formModel.value[field]);
    } catch (e) {
      currentDateTime.value = new Date();
    }
  } else {
    currentDateTime.value = new Date();
  }
  dateTimePickerShow.value = true;
}

const handleConfirm = (e) => {
  const formattedDate = formatTime(e.value, 'YYYY-MM-DD HH:mm:ss');
  if (currentEditField.value) {
    formModel.value[currentEditField.value] = formattedDate;
  }
  handleCloseTimePicker();
}

const handleCloseTimePicker = () => {
  dateTimePickerShow.value = false;
}

const submit = async () => {
  console.log(formModel.value, 'formModel.value')
  try {
    await formRef.value.validate();
    emit('submit', formModel.value);
    close();
  } catch (error) {
    console.error('表单验证失败', error);
  }
}

// 定义方法  
function open() {
  show.value = true;
  if (props.type === 'edit') {
    formModel.value = { ...props.rowData };
  } else {
    formModel.value = createDefaultModel();
  }
  formRef.value.resetFields();
}

function close() {
  // 关闭逻辑，设置 show 为 false  
  show.value = false;
}  
</script>

<style scoped lang="scss">
.new-or-edit-modal {
  .modal-header {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .modal-content {
    padding: 20rpx;
  }
}
</style>
